<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <div id="title">
            <!-- 给每个按钮设定属性 -->
            <button data-url="/center">个人中心</button>
            <button data-url="/news">新闻</button>
            <button data-url="/music">音乐</button>
        </div>
        <div id="views">

        </div>
        <script>
            //获取dom
            const obtns = document.querySelectorAll("#title button")
            const oView = document.querySelector("#views")
            //创建路由表
            const routes=[
                {path:"/center",countent:"个人中心"},
                {path:"/news",countent:"新闻"},
                {path:"/music",countent:"音乐"}
            ]
            //遍历所有obtn 绑定事件
            for(var i = 0;i<obtns.length;i++){
                obtns[i].onclick = function(){
                    //通过/dataset.url 获取标签上的自定义属性,然后改变hash路由
                    location.hash = this.dataset.url
                }
            }
            //然后window上有个onhashchange事件监听 url的hash变化
            window.onhashchange=function(e){
                //event事件上有新旧的hash地址
                const newURL = e.newURL.split("#")[1]
                routes.forEach((item)=>{
                    if(item.path===newURL){
                        //跟新视图
                        oView.textContent = item.countent
                    }
                })
            }
        </script>
</body>
</html>